<template>
	<div >
			<el-row class="left">
				<el-row :gutter="20" >
					<el-col :span="24"><el-button class="el-icon-picture"  @click.native ="hideAndShow('one')" type="primary">大明湖</el-button></el-col>
					</el-row>
					<el-row :gutter="20" >
						<el-col :span="24"><el-button class="el-icon-picture" @click.native ="hideAndShow('two')" type="primary">宽厚里</el-button></el-col>
					</el-row>
					<el-row :gutter="20" >
						<el-col :span="24"><el-button class="el-icon-picture" @click.native ="hideAndShow('three')" type="primary">芙蓉街</el-button></el-col>
					</el-row>
				</el-row>
			
			<div class="one">
				<el-carousel  :interval="4000" type="card" height="500px">
				   <el-carousel-item v-for="item in imagesOne" :key="item">
					 <img :src="item" />
				   </el-carousel-item>
				 </el-carousel>
			</div>
			<div class="two">
				<el-carousel  :interval="4000" type="card" height="500px">
				   <el-carousel-item v-for="item in imagesTwo" :key="item">
					 <img :src="item" />
				   </el-carousel-item>
				 </el-carousel>
			</div>
			<div class="three">
				<el-carousel  :interval="4000" type="card" height="500px">
				   <el-carousel-item v-for="item in imagesThree" :key="item">
					 <img :src="item" />
				   </el-carousel-item>
				 </el-carousel>
			</div>	
		</div>

</template>

<script>
	import $ from 'jquery'
export default {
	data(){
	  return{
	  imagesOne:[require('@/assets/static/images/20210227203245.jpg'),require('@/assets/static/images/20210227203253.jpg'),require('@/assets/static/images/20210227203256.jpg')],
	  imagesTwo:[require('@/assets/static/images/20210227203258.jpg'),require('@/assets/static/images/20210227203302.jpg'),require('@/assets/static/images/20210227203307.jpg')],
	  imagesThree:[require('@/assets/static/images/20210227203311.jpg'),require('@/assets/static/images/20210227203314.jpg'),require('@/assets/static/images/20210227203317.jpg')]
	  }
	},
	mounted:function(){
	this.hideAndShowTwo();
	},
	methods:{
		//点击按钮显示与隐藏,当点击某一个而没有隐藏时，提前隐藏其他
		hideAndShow(value){
			if(value=='one'){
				$('.two').hide();
				$('.three').hide();
				$('.one').toggle(1000);
			}
			else if(value=='two'){
				$('.one').hide();
				$('.three').hide();
				$('.two').toggle(1000);
			}
			else if(value=='three'){
				$('.one').hide();
				$('.two').hide();
				$('.three').toggle(1000);
			}
		},
		//用于页面初始化隐藏
		hideAndShowTwo(){
			$('.one').hide();
			$('.two').hide();
			$('.three').hide();
		}
	},
	}
</script>

<style>
		body{
			background-image: url(../../assets/static/imgs/beijing.jpg);
			background-repeat: no-repeat;
			background-size: 100%;
		}

	 .el-row {
	    margin-bottom: 100px;
	    &:last-child {
	      margin-bottom: 0;
	    }
	  }
	  .left{
		   width: 20%;
		   position: relative;
		   float: left;
		   margin-top: 40px;
	  }
	.el-col button{
		position: relative;
		float: left;
	}
	.one,.two,.three{
		width: 80%;
		position: relative;
		float: left;
	}
	img{
		width: 100%;
	}
	  .el-carousel__item:nth-child(2n) {
	    background-color: #99a9bf;
	  }
	  
	  .el-carousel__item:nth-child(2n+1) {
	    background-color: #d3dce6;
	  }
</style>
